<!-- 当前组件暂时只用于配置面板，暂时只有亮白主题 -->
<template>
  <div
    class="vs-date-picker"
    :class="`vs-date-picker vs-date-picker_${componentStyle}`"
  >
    <el-date-picker
      ref="vis-el-date-picker"
      v-model="dateObj"
      size="default"
      :type="timeType"
      :format="displayFormat"
      :picker-options="pickerOptions"
      :placeholder="timeObj.name"
      :clearable="clearable"
      :popper-class="popperClass"
      :style="{ width: width + 'px' }"
      @change="changeTime"
    ></el-date-picker>
  </div>
</template>
<script>
import { objHas } from '@/utils/util';
import dayjs from 'dayjs';
import isoWeek from 'dayjs/plugin/isoWeek';
import defaultValues from './default-values.js';
import { nextTick } from 'vue';

dayjs.extend(isoWeek);

export default {
  components: {},
  props: {
    value: String,
    timeType: {
      type: String,
      default: 'date', // 暂时可选值 year/month/date/week/datetime
    },
    width: Number,
    format: String,
    componentStyle: {
      type: String,
      default: 'light',
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['update:value', 'getDatetimeRange'],
  data() {
    return {
      date: this.value,
      dateObj: null,
      pickerOptions: {
        firstDayOfWeek: 1,
      },
      displayFormat: '',
      popperClass: 'vs-date-picker-popup_light',
    };
  },
  computed: {
    timeObj() {
      const { timeOpt } = defaultValues;
      const timeObj = timeOpt.find(item => item.key === this.timeType);
      return timeObj;
    },
  },
  watch: {
    value(val) {
      if (val === 'Invalid Date' || !val) {
        this.dateObj === null;
      } else {
        this.dateObj = dayjs(val);
      }
    },
    timeType(val) {
      this.dateObj = val ? this.dateObj : null;
      this.displayFormat = '';
      setTimeout(() => {
        this.displayFormat = this.getDisplayFormat();
      }, 20);
    },
    dateObj(val) {
      if (val && objHas(val, '$D') && isNaN(val.$D)) {
        this.dateObj = null;
      }
    },
    componentStyle: {
      handler(newVal, oldVal) {
        if (newVal === oldVal) {
          return;
        }
        const popperElm = this.$refs['vis-el-date-picker'] && this.$refs['vis-el-date-picker'].popperElm;

        nextTick(() => {
          this.popperClass = `vs-date-picker-popup_${newVal}`;
          if (popperElm) {
            popperElm.className = `el-picker-panel el-date-picker el-popper vs-date-picker-popup_${newVal}`;
          }
        });
      },
      immediate: true,
    },
  },
  created() {
    if (this.value) {
      this.dateObj = dayjs(this.value);
    }
    this.displayFormat = this.getDisplayFormat();
  },
  methods: {
    judgeFormat() {
      if (this.format) {
        return this.format;
      }
      let format = '';
      switch (this.timeType) {
        case 'year':
          format = 'YYYY';
          break;
        case 'month':
          format = 'YYYY-MM';
          break;
        case 'date':
        case 'week':
          format = 'YYYY-MM-DD';
          break;
        case 'datetime':
          format = 'YYYY-MM-DD HH:mm:ss';
          break;
        default:
          format = 'YYYY-MM-DD';
          break;
      }
      return format;
    },
    getDisplayFormat() {
      if (this.timeType === 'week') {
        return this.$demoi18n('datePicker.weekFormat');
      }
      return this.judgeFormat();
    },
    changeTime(val) {
      const dateObj = dayjs(val);
      this.dateObj = dateObj;
      const format = this.judgeFormat();
      const date = dateObj.format(format);
      if (date !== this.value) {
        this.$emit('update:value', date);
        const range = this.getDatetimeRange();
        this.$emit('getDatetimeRange', range);
      }
    },

    /*
     * 选择年，月，周，日，都会有相应的起始，终止范围时间（精确到秒），将这个时间范围时间抛出去，让有需要获取范围的逻辑使用
     * 返回：
     * 年：[2010-01-01 00:00:00, 2011-01-01 00:00:00]
     * 月：[2010-01-01 00:00:00, 2010-02-01 00:00:00]
     * 周：[2010-01-01 00:00:00, 2010-01-08 00:00:00]
     * 日：[2010-01-01 00:00:00, 2010-01-02 00:00:00]
     */
    getDatetimeRange() {
      const format = 'YYYY-MM-DD HH:mm:ss';
      let start = this.dateObj.format(format);
      let end;
      switch (this.timeType) {
        case 'year':
          end = this.dateObj.add(1, 'year').format(format);
          break;
        case 'month':
          end = this.dateObj.add(1, 'month').format(format);
          break;
        case 'week': // element选周时始终都是选中星期2
          start = this.dateObj.subtract(1, 'day').format(format);
          end = this.dateObj.add(6, 'day').format(format);
          break;
        case 'date':
          end = this.dateObj.add(1, 'day').format(format);
          break;
        default:
          break;
      }
      return [start, end];
    },
  },
};
</script>
<style lang="less" scoped>
@bgColor: #0d263a;
@borderColor: #588ba8;
@textColor: #ffffff;
.vs-date-picker_dark {
  background-color: #0d263a;
  :deep(.el-date-editor) {
    .el-input__inner {
      color: @textColor;
    }
    .el-input__inner:focus {
      border-color: @borderColor;
    }
    .el-input__prefix {
      .el-input__icon {
        color: @textColor;
      }
    }
  }
}

.vs-date-picker_light {
  background-color: #ffffff;
}
</style>
<style lang="less">
@bgColor: #0d263a;
@liBgColor: rgb(62, 75, 119);
@textColor: #adc5d9;
@currentColor: #00aaff;
@disableColor: #868686;
@borderColor: #adc5d9;
.el-picker-panel {
  .el-picker-panel__footer {
    .el-button--text {
      display: none;
    }
  }
}
.vs-date-picker-popup_dark {
  border: unset !important;
  .el-picker-panel__body-wrapper {
    color: @textColor;
    background: @bgColor;
    border: 1px solid @liBgColor !important;
    border-radius: 4px;
  }
  .el-date-picker__header {
    .el-picker-panel__icon-btn {
      color: @textColor;
    }
    .el-date-picker__header-label {
      color: @textColor;
      font-size: 12px;
    }
  }
  .el-date-picker__header--bordered {
    border-bottom: none;
  }
  .el-picker-panel__footer {
    display: block;
    background-color: @bgColor;
    border-top: 1px solid @borderColor;
    .el-button--text {
      display: none;
    }
    .el-picker-panel__link-btn {
      background-color: #4ca3bf;
      border: 1px solid #1a5171;
      color: #f4f5f6;
    }
  }
  .el-picker-panel__body {
    .el-date-picker__time-header {
      border-bottom: none;
      .el-date-picker__editor-wrap {
        .el-input {
          .el-input__inner {
            background-color: @bgColor;
            color: @textColor;
            border: 1px solid #588ba8;
          }
          .el-input__inner:focus {
            border-color: #588ba8;
          }
          .el-input__prefix {
            .el-input__icon {
              color: @textColor;
            }
          }
        }

        .el-time-panel {
          border: 1px solid #588ba8;
          background-color: @bgColor;
          .el-time-spinner__item {
            color: @disableColor;
          }
          .el-time-spinner__item.is-active:not(.disabled) {
            color: @textColor;
          }
          .el-time-spinner__item:hover:not(.disabled):not(.is-active) {
            background-color: @bgColor;
          }
          .el-time-panel__footer {
            display: none;
          }
        }
      }
    }
    .el-date-table {
      th {
        color: @textColor;
        border-bottom: 1px solid @borderColor;
      }
      td.next-month,
      td.prev-month {
        color: @textColor;
      }
      td.current span {
        color: @currentColor;
        background-color: @bgColor;
      }
      td.disabled div {
        background-color: @bgColor;
        color: @disableColor;
      }
    }

    .is-week-mode {
      .el-date-table__row {
        &:hover div {
          background-color: @liBgColor !important;
          color: @textColor;
        }
      }
      .current {
        div {
          background-color: @liBgColor !important;
        }
        &:hover div {
          color: @textColor;
        }
      }
    }

    .el-month-table,
    .el-year-table {
      td .cell {
        color: @textColor;
      }
      td.current .cell,
      td.today .cell {
        color: #00aaff;
      }
      td.disabled .cell {
        background-color: @bgColor;
        color: @disableColor;
      }
    }
  }

  .popper__arrow {
    border-bottom-color: #588ba8 !important;
    &::after {
      border-bottom-color: @bgColor !important;
    }
  }
  &.el-popper[x-placement^='top'] {
    .popper__arrow {
      border-top-color: #588ba8;
    }
    .popper__arrow:after {
      border-top-color: #0d263a;
    }
  }
}

.vs-date-picker-popup_real {
  border: unset !important;
  .el-picker-panel__body-wrapper {
    color: #E0E3E8;
    background: #232323;
    border: 1px solid #666666 !important;
    border-radius: 4px;
  }
  .el-date-picker__header {
    .el-picker-panel__icon-btn {
      color: #E0E3E8;
    }
    .el-date-picker__header-label {
      color: #E0E3E8;
      font-size: 12px;
    }
  }
  .el-date-picker__header--bordered {
    border-bottom: none;
  }
  .el-picker-panel__footer {
    display: block;
    background-color: #232323;
    border-top: 1px solid @borderColor;
    .el-button--text {
      display: none;
    }
    .el-picker-panel__link-btn {
      background-color: #4ca3bf;
      border: 1px solid #1a5171;
      color: #f4f5f6;
    }
  }
  .el-picker-panel__body {
    .el-date-picker__time-header {
      border-bottom: none;
      .el-date-picker__editor-wrap {
        .el-input {
          .el-input__inner {
            background-color: #232323;
            color: #46E1F0;
            border: 1px solid #588ba8;
          }
          .el-input__inner:focus {
            border-color: #588ba8;
          }
          .el-input__prefix {
            .el-input__icon {
              color: #E0E3E8;
            }
          }
        }

        .el-time-panel {
          border: 1px solid #588ba8;
          background-color: #232323;
          .el-time-spinner__item {
            color: @disableColor;
          }
          .el-time-spinner__item.is-active:not(.disabled) {
            color: #E0E3E8;
          }
          .el-time-spinner__item:hover:not(.disabled):not(.is-active) {
            background-color: #232323;
          }
          .el-time-panel__footer {
            display: none;
          }
        }
      }
    }
    .el-date-table {
      th {
        color: #E0E3E8;
        border-bottom: 1px solid @borderColor;
      }
      td.next-month,
      td.prev-month {
        color: #E0E3E8;
      }
      td.current span {
        color: @currentColor;
        background-color: #232323;
      }
      td.disabled div {
        background-color: #232323;
        color: @disableColor;
      }
    }

    .is-week-mode {
      .el-date-table__row {
        &:hover div {
          background-color: #666666 !important;
          color: #E0E3E8;
        }
      }
      .current {
        div {
          background-color: #666666 !important;
        }
        &:hover div {
          color: #E0E3E8;
        }
      }
    }

    .el-month-table,
    .el-year-table {
      td .cell {
        color: #E0E3E8;
      }
      td.current .cell,
      td.today .cell {
        color: #00aaff;
      }
      td.disabled .cell {
        background-color: #232323;
        color: @disableColor;
      }
    }
  }

  .el-popper__arrow {
    border-bottom-color: #588ba8 !important;
    &::after {
      border-bottom-color: #232323 !important;
    }
  }
  &.el-popper {
    .el-popper__arrow {
      border-top-color: #588ba8;
      z-index: 1;
    }
    .el-popper__arrow:after {
      border-top-color: #0d263a;
    }
    .el-popper__arrow:before {
      border-top-color: #0d263a;
      border: 1px solid #606266;
      background: #232323;
      right: 0;
    }
  }
}
</style>
